<template>
  <div class="app-container">
    <div class="search-container">
      <div class="btn-container">
        <el-button type="primary" @click="onSubmit">新增</el-button>
        <el-button type="primary" @click="onSubmit">导出</el-button>
      </div>
      <el-form ref="form" :model="form" label-width="80px" class="search-form">
        <el-form-item label="活动名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="drawer = true">更多搜索</el-button>
        </el-form-item>

        <el-drawer
          title="更多搜索"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose"
        >
          <div class="drawer-container">
            <el-form-item label="活动名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input v-model="form.name" />
            </el-form-item>
          </div>
          <div class="btn">
            1321312
          </div>
        </el-drawer>

      </el-form>
    </div>

    <table-list
      :columns="columns"
      :table-data="tableData"
      :total="total"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      show-selection
      @pagination-change="loadData"
      @selection-change="handleSelection"
    >
      <!-- 自定义状态列 -->
      <template #status="{ row }">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>

      <!-- 自定义操作列 -->
      <template #action="{ row }">
        <el-button size="mini" @click="handleEdit(row)">搜索</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </table-list>
  </div>
</template>

<script>
import { getList } from '@/api/table';
import TableList from '@/components/TableList';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      };
      return statusMap[status];
    }
  },
  components: {
    TableList
  },
  data() {
    return {
      drawer: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      columns: [
        { prop: 'author', label: '姓名', width: 120 },
        {
          prop: 'status',
          label: '状态',
          slot: true,
          width: 100
        },
        {
          prop: 'title',
          label: '城市'
        },
        {
          prop: 'action',
          label: '操作',
          slot: true,
          width: 200
        }
      ],
      tableData: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleSelection(selection) {
      console.log('选中数据:', selection);
    },
    loadData() {
      getList({ currentPage: this.currentPage }).then((response) => {
        this.tableData = response.data.items;
        this.total = response.data.total;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.search-container{
  width: 100%;
  display: flex;
  .search-form{
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
  .drawer-container{
    padding: 40px;
  }
}
</style>
